<template>
  <div class="container">
    <div>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form ref="form" :model="form">
            <el-form-item label="班组名称：">
              <el-input v-model="person.name" style="width:200px"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-form ref="form" :model="form">
            <el-form-item label="班组编号：">
              <el-select v-model="person.client" placeholder>
                <el-option
                  v-for="item in person.clientList"
                  :key="item.CLIENT_NO"
                  :label="item.CLIENT_NAME"
                  :value="item.CLIENT_NO"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-form ref="form" :model="form" style="float:left">
            <el-button size="mini" type="primary" @click="personQuery">查 询</el-button>
            <!-- <el-button size="mini" type="success" @click="addNewPerson">新 增</el-button> -->
          </el-form>
        </el-col>
      </el-row>
    </div>
    <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" highlight-current-row>
      <el-table-column sortable  type="index" label="序号" align="center" width="100"></el-table-column>
      <el-table-column sortable  prop="CLIENT_NO" label="班组编号" align="center"></el-table-column>
      <el-table-column  prop="CLIENT_NAME" label="班组名称" align="center"></el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      ></el-pagination>
    </div>
    <!-- 新增人员 -->
    <el-dialog
      title="新增人员"
      :visible.sync="newPersonForm.show"
      height="550px"
      width="450px"
      class="new_person"
    >
      <!-- <div > -->
      <!-- <h2>
        <span class="iconfont icon-xinzengrenyuan--"></span>
        <span>新增人员</span>
        <span
          class="iconfont icon-guanbi"
          @click="newPersonForm.show = false, person.listShow = true"
        ></span>
      </h2>-->
      <el-form
        ref="newPersonForm"
        :model="newPersonForm"
        v-model="newPersonForm"
        label-width="80px"
        :rules="rules"
        inline-message
      >
        <el-form-item prop="Name" label="姓名">
          <el-input v-model="newPersonForm.Name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item prop="Phone" label="电话号码">
          <el-input
            v-model="newPersonForm.Phone"
            placeholder="请输入电话"
            maxlength="11"
            oninput="value=value.replace(/[^\d]/g,'')"
          ></el-input>
        </el-form-item>
        <el-form-item label="通讯编号">
          <el-input v-model="newPersonForm.SimCardNo" placeholder="请输入通讯编号"></el-input>
        </el-form-item>
        <el-form-item label="出生日期">
          <el-date-picker
            v-model="newPersonForm.BirhDay"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择出生日期"
            style="width: 100%;"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="入职时间">
          <el-date-picker
            v-model="newPersonForm.WorkDate"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择入职时间"
            style="width: 100%;"
          ></el-date-picker>
        </el-form-item>
        <el-form-item prop="Sex" label="性别">
          <el-radio v-model="newPersonForm.Sex" label="男">男</el-radio>
          <el-radio v-model="newPersonForm.Sex" label="女">女</el-radio>
        </el-form-item>
        <el-form-item prop="WorkType" label="工种">
          <el-select v-model="newPersonForm.WorkType" placeholder="请选择工种">
            <el-option value="班组长"></el-option>
            <el-option value="环卫工"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="ClientNo" label="班组">
          <el-select v-model="newPersonForm.ClientNo" placeholder="请选择班组">
            <el-option
              v-for="item in person.clientList"
              :key="item.CLIENT_NO"
              :label="item.CLIENT_NAME"
              :value="item.CLIENT_NO"
            />
          </el-select>
        </el-form-item>
        <div class="btns">
          <el-button type="primary" @click="addPerson('newPersonForm')" v-if="!editPersonShow">确定</el-button>
          <el-button
            type="primary"
            @click="saveEditPerson('newPersonForm')"
            v-if="editPersonShow"
          >保存</el-button>
          <el-button type="success" @click="resetForm('newPersonForm')">重置</el-button>
          <el-button type="danger" @click="newPersonForm.show = false, person.listShow = true">取消</el-button>
        </div>
      </el-form>
      <!-- </div> -->
    </el-dialog>
  </div>
</template>
<script>
import '@/assets/css/common.css'
import { formatDate } from '@/common/js/date.js'
import export2Excel from '@/utils/exportExcel/index.js'
export default {
  data () {
    return {
      currentPage: 1, //初始页
      pageSize: 10,    //    每页的数据
      // 人员管理
      person: {
        name: '',
        client: '',
        clientList: []
      },
      // 新增人员
      newPersonForm: {
        show: false,
        Name: '',
        Phone: '',
        SimCardNo: '',
        BirhDay: '',
        WorkDate: '',
        Sex: '男',
        WorkType: '',
        ClientNo: ''
      },
      tableData: [],
      originalData: []
    }
  },
  created () {
    this.getTeamList();
    this.getlistdata();
  },
  methods: {
    async getTeamList () {
      const { data } = await this.$Http.get('DataListCompany/GetCleaneranceApi?ClientNo=' + localStorage.getItem('CLIENT_NO'))
      this.person.clientList = data
      this.person.clientList.unshift({ "CLIENT_NO": "0", "CLIENT_NAME": "全部" })
      // this.attendanceMonth.records.teamList = data
    },
    async getlistdata () {
      var url = 'DataListCompany/GetTeamWorkApi?ClientNo=' + localStorage.getItem('CLIENT_NO')
      const { data } = await this.$Http.get(url)
      this.originalData = data

      this.personQuery()
    },
    // 人员管理查询
    personQuery () {
      this.tableData = this.originalData
      const { name, client } = this.person
      if (name) this.tableData = this.tableData.filter(item => item.CLIENT_NAME.includes(name))
      if (client) this.tableData = this.tableData.filter(item => item.CLIENT_NO.includes(client))
    },
    // 新增人员
    addNewPerson () {
      this.editPersonShow = false
      this.person.listShow = false
      this.newPersonForm = {
        show: true,
        Name: '',
        Phone: '',
        SimCardNo: '',
        BirhDay: '',
        WorkDate: '',
        Sex: '男',
        WorkType: '',
        ClientNo: ''
      }
    },
    async addPerson (formName) {
      for (const k in this.newPersonForm) {
        if (this.newPersonForm[k] === '') {
          this.$message({
            message: '表单项不能为空！！',
            type: 'warning'
          })
          return false
        }
      }
      const { data } = await this.$Http.get('/DataListCompany/AddWorkerApi', {
        params: this.newPersonForm
      })
      if (data.IsSucess) {
        this.$message({
          message: '新增成功！！！',
          type: 'success'
        })
        this.getlistdata()
        this.resetForm('newPersonForm')
        this.newPersonForm.show = false
      }
    },
    // 重置新增人员表单
    resetForm (formName) {
      this.$refs[formName].resetFields()
      // this.newPersonForm.SimCardNo = ''
      // this.newPersonForm.BirhDay = ''
      // this.newPersonForm.WorkDate = ''
      this.newPersonForm = {
        show: true,
        Name: '',
        Phone: '',
        SimCardNo: '',
        BirhDay: '',
        WorkDate: '',
        Sex: '男',
        WorkType: '',
        ClientNo: ''
      }
    },
    async handleEdit (index, row) {

      //   this.idx = index;
      //   this.form = row;
      //   this.editVisible = true;
      const { data } = await this.$Http.get('/DataListCompany/DeleteWorkerApi?VID=' + row.VID)
      if (data.IsSucess) {
        this.$message({
          message: '删除成功！！！',
          type: 'success'
        })
        this.getlistdata()
      }
    },
    // 分页导航
    handlePageChange (currentPage) {
      this.currentPage = currentPage;
      // console.log(this.currentPage)
      // this.$set(this.query, 'pageIndex', val);
      // this.getData();
    },
    handleSizeChange (size) {
      this.pageSize = size;
      console.log(this.pageSize)
    }
  }
}
</script>
<style scoped lang='less'>
.content {
  overflow-y: scroll;
}
.el-col-6 {
  min-width: 400px;
  min-height: 50px;
}
.el-table th {
  height: 40px;
}
.new_person {
  .el-form {
    width: 260px;
    // height: 180px;
    margin: 10px auto;
    background-color: #fff;
    .el-form-item {
      margin-bottom: 20px;
    }
    .btns {
      display: flex;
      align-items: center;
      justify-content: center;
      // padding-top: 10px;
      .el-button {
        margin: 0 10px;
        /deep/span {
          padding: 0 5px;
        }
      }
    }
  }
}
</style>